<h2>Technologies</h2>
<p>
  Technologies improve research speed, max ship module level, drone modding and
  more.
</p>
<div fxLayout="row wrap" fxLayoutGap="0.5rem">
  <nz-card
    [nzTitle]="cardTitle"
    [nzExtra]="extraTemplate"
    nzSize="small"
    class="tech-container"
    fxFlex="100%"
    fxFlex.gt-sm="0 0 calc(50% -0.5rem)"
    fxFlex.gt-md="0 0 calc(33% -0.5rem)"
    *ngFor="
      let tech of ms.game.researchManager.unlockedTechnologies;
      trackBy: getTechId
    "
  >
    <ng-template #cardTitle>
      <nz-card-meta
        [nzAvatar]="avatarTemplate"
        [nzTitle]="title"
        [nzDescription]="description"
      ></nz-card-meta>
    </ng-template>
    <ng-template #avatarTemplate>
      <i nz-icon [nzType]="tech.icon" [style.color]="tech.color"></i>
    </ng-template>
    <ng-template #title>
      <span>
        {{ tech.name }}:
        <span class="monospace">{{ tech.quantity | format: true }}</span>
      </span>
    </ng-template>
    <ng-template #description>
      <span class="monospace"
        >{{ tech.progress | format: true }}/{{ tech.total | format: true }}
        <span *ngIf="tech.technologyBonus.totalBonusUi.gt(0)">
          +{{ tech.technologyBonus.totalBonusUi | format }}%
        </span>
      </span>
    </ng-template>
    <ng-template #extraTemplate>
      <i
        nz-icon
        nzType="info-circle"
        nzTheme="outline"
        class="info-icon"
        nz-popover
        [nzPopoverTitle]="tech.name"
        [nzPopoverContent]="descriptionPop"
      ></i>
      <span class="text-secondary">Priority</span><br />
      <nz-input-number
        [(ngModel)]="tech.priority"
        nzMin="0"
        nzMax="100"
        nzStep="1"
        nzSize="small"
        style="max-height: 24px"
      ></nz-input-number>
    </ng-template>
    <app-progress [progress]="tech.progressPercent"></app-progress>

    <ng-template #descriptionPop>
      <div class="desc-popover">
        {{ tech.description }}
      </div>
    </ng-template>
  </nz-card>
</div>
